import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Button, notification } from 'antd';
import { categoryType_status } from '@/common/contact'
import FormCondition from '@/components/FormCondition';
import DrawerCondition from '@/components/DrawerCondition';

const WarbandForm = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading, reload, activeTabKey } = props;
  const [list, setList] = useState([]);
  const { show = false, detail = {} } = visible;
  const { id } = detail;
  const [form] = Form.useForm();
  console.log(detail)
  useEffect(() => {
    if (show) {
      fetchData();
    }
  }, [show]);
  const fetchData = () => {
    dispatch({
      type: 'liveStreaming/fetchListMaterialCategory',
      payload: {
        categoryType: activeTabKey
      },
      callback: (e) => {
        setList(e);
      },
    });
  };
  // 新增修改 传id修改 不传id新增
  const fetchRoleEdit = () => {
    form.validateFields().then((values) => {
      const { id } = detail;
      let { parentId = [], node = '' } = values;
      parentId = parentId[parentId.length - 1].toString();
      const payload = {
        ...detail,
        ...values,
        parentId: parentId,
        node: node,
        id,
      };
      if (parentId == id) {
        return notification.success({
          message: '温馨提示',
          description: '子级Id不可与父级Id相同',
        });
      }
      dispatch({
        type: 'liveStreaming/fakeHandleCategory',
        payload,
        callback: () => {
          onClose();
          reload();
        },
      });
    });
  };
  const filterList = (list) => {
    return list.map((item) => {
      const { categoryName: label, id: value, subMaterialCategoryList: children } = item;
      const localItem = {
        label,
        value,
        node: item['node'],

        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  const formItems = [
    {
      label: '分类名称',
      name: 'categoryName',
    },
    {
      label: '父节点',
      name: 'parentId',
      type: 'cascader',
      changeOnSelect: true,
      select: filterList([{ categoryName: '无', id: '0' }, ...list]),
      onChange: (e) => {
        form.setFieldValue('node', e.toString());
      },
    },
    {
      label: '分类类别',
      name: 'categoryType',
      type: 'select',
      select: categoryType_status
    },
    {
      label: '父级node',
      name: 'node',
      hidden: true,
    },
    {
      label: '排序',
      name: 'sortValue',
      type: 'number',
    },
  ];

  const modalProps = {
    title: `${id ? '修改' : '新增'}`,
    visible: show,
    onClose,
    footer: (
      <Button type="primary" loading={loading} onClick={fetchRoleEdit}>
        确定
      </Button>
    ),
  };

  return (
    <DrawerCondition {...modalProps}>
      <FormCondition form={form} formItems={formItems} initialValues={detail}></FormCondition>
    </DrawerCondition>
  );
};

export default connect(({ weCom, loading }) => ({
  loading: loading.models.redBooklet,
}))(WarbandForm);
